<template>
    <h2>添加酒店</h2>
    
           <table class="table table-bordered">
    
                <tr>
                    <th>酒店名称</th>
                    <th>
                        <input type="text" v-model="TianJIa1.jname">
                    </th>
                </tr>
                <tr>
                    <th>酒店地址</th>
                    <th>
                       <select  v-model="TianJIa1.did">
                        <option value="-1"> --请选择---</option>
                        <option v-for="item in aa" :value="item.did"> {{ item.dname }}</option>
                       </select>
                        
                    </th>
                </tr>
    
    
    
                <tr>
                    <th>酒店图片</th>
                    <th>
                        <img  :src=" TianJIa1.jimg" style="height: 100px; width: 100px;">
                        <input type="file" @change="UpFile">
                        
                    </th>
                </tr>
    
    
                <tr>
                    <th>酒店手机号</th>
                    <th>
                        <input type="text" v-model="TianJIa1.phone">
                    </th>
                </tr>
    
    
                <tr>
                    <th>酒店状态</th>
                    <th>
                        <input type="radio" :value="true" v-model="TianJIa1.jsatic">开业
                        <input type="radio" :value="false" v-model="TianJIa1.jsatic">停业
                    </th>
                </tr>
    
    
                <tr>
                    <th>创建时间</th>
                    <th>
                        <input type="date" v-model="TianJIa1.stime" >
                    </th>
                </tr>
    
    
                <tr>
                    <th>交通</th>
                    <th>
                        <input type="text" v-model="TianJIa1.jiaoTong ">
                    </th>
                </tr>
    
    
                <tr>
                    <th>政策</th>
                    <th>
                        <input type="text" v-model="TianJIa1.zhengce" >
                    </th>
                </tr>
    
    
                <tr>
                    <th></th>
                    <th>
                       <button class="btn btn-success" @click="AddJiu">修改</button>
                    </th>
                </tr>
    
    
             
    
    
           </table> 
    
    </template>
    
    
    <script setup lang="ts">
    import { onMounted } from 'vue';   
    
    
    import { ref } from 'vue';
    import axios from 'axios';
    import { useRoute,useRouter,createRouter } from 'vue-router';

    const router=useRouter();
    const route=useRoute();

    onMounted(()=>{   //钩子函数

        XiaLa();
        Fantian();
    })
    
    
    const aa = ref([{   //响应式数据
    
        "did": -1,
        "dname": "string"
    
    }])
    //下拉框显示
     const XiaLa=()=>{   
    
    
            axios.get('https://localhost:7240/api/User/ShowDi').then(res=>{
    
                    aa.value=res.data
    
            })
    
     }
    
    
    
    
    const UpFile=(e:any)=>{   //上传图片
    
    
        var a =e.target.files[0];
    
        var b = new FormData();
        
        b.append("image",a)
    
        axios.post('https://localhost:7240/api/Upfile/Upfile',b).then(res=>{
    

    
            console.log(res.data);
                    if(res.data.id==-1)
                    {
                        alert(res.data.tiShi)
                    }
                    else if(res.data.id==-2)
                {
                    alert(res.data.tiShi)

                }
                    
                    else
                    {
                        TianJIa1.value.jimg=res.data.path;
                        alert(res.data.tiShi)
    
                    }
                      
    
        })
        
    
    
    
    
    }
    
    
    
    
    
    const TianJIa1=ref({     //响应式数据
    
        "jid": route.params.id,
      "jname": "",
      "did": -1,
      "jimg": "",
      "phone": "",
      "jsatic": "",
      "stime": "",
      "jiaoTong": "",
      "zhengce": "",
      "isDel": true
    
    
    })
    
    
    
    
      const  AddJiu=()=>{   //酒店修改
    
    
    
            if(TianJIa1.value.jname=="")
            {
                alert('姓名不能为空')
                    return ;
            }
    
            if(TianJIa1.value.did==-1)
            {
                alert('请选择地区')
                    return ;
            }
    
    
                if(TianJIa1.value.jimg=="")
            {
                alert('请上传图片')
            }
    
            if(TianJIa1.value.phone=="")
            {
                alert('手机号不能为空')
                    return ;
            }
    
            if(TianJIa1.value.jsatic=="")
            {
                alert('请选择状态不能为空')
                    return ;
            }
    
        
    
            if(TianJIa1.value.stime=="")
            {
                alert('请选择开业时间')
                    return ;
            }
    
    
            if(TianJIa1.value.jiaoTong=="")
            {
                alert('交通不能为空')
                    return ;
            }
    
            
            if(TianJIa1.value.zhengce=="")
            {
                alert('政策不能为空')
                    return ;
            }
    
            
         
                
                    axios.put('https://localhost:7240/api/User/UpJiuDian',TianJIa1.value).then(res=>{
    
    
                            if(res.data>0)
                            {
                                alert("修改成功")
                                router.push('/')
                            }
                            else if(res.data==-1)
                            {
                                alert('手机号重复')
                            }
                            else
                            {
                                alert('修改失败')
                            }
    
                    })
    
    
        }
    
    
    
       const Fantian=()=>{

        axios.get('https://localhost:7240/api/User/FanTian',{params:{

            id:route.params.id
        }}).then(res=>{

            console.log(res);
        
            TianJIa1.value=res.data[0];
         
                    
        })


       }




    
    
    </script>